<template>
    <view class="authoration-page">
        <view class="form">
            <view class="form-item">
                <text class="label">家庭名称</text>
                <input :disabled="true" v-model="form.sname" placeholder="请输入家庭名称" />
            </view>
			<!-- <view class="form-item">
			    <text class="label">家庭成员关系</text>
			    <picker @change="relationChange" :range="relationlist" range-key="title" class="flex ali-c" :style="{
			        color: form.relation ? '#000000' : '#888888'
			    }">
			        {{ form.relation ? relationlist[form.relation].title : '请选择家庭成员关系' }}
			        <uni-icons type="right" color="#888888" size="16" />
			    </picker>
			</view>
            <view class="form-item">
                <text class="label">手机号</text>
                <input v-model="form.phoneNumber" placeholder="请输入手机号" type="number" />
            </view>
            <view class="form-item">
                <text class="label">真实姓名</text>
                <input v-model="form.name" placeholder="请输入真实姓名" />
            </view>
			<view class="form-item">
			    <text class="label">性别</text>
			    <picker @change="sexChange" :range="sexlist" range-key="title" class="flex ali-c" :style="{
			        color: form.sex ? '#000000' : '#888888'
			    }">
			        {{ form.sex ? sexlist[form.sex].title : '请选择性别' }}
			        <uni-icons type="right" color="#888888" size="16" />
			    </picker>
			</view>
            <view class="form-item">
                <text class="label">出生日期</text> -->
                <!-- <picker @change="birthChange" mode="date" class="flex ali-c" :style="{
                    color: form.brithday ? '#000000' : '#888888'
                }">
                    {{ form.brithday ? form.brithday : '请选择出生日期' }}
                    <uni-icons type="right" color="#888888" size="16" />
                </picker> -->
				<!-- <picker class="flex ali-c" mode="date"  :start="startDate" 
				:style="{
				    color: form.brithday ? '#000000' : '#888888'
				}" :end="endDate" @change="birthChange">
					  {{ form.brithday ? form.brithday : '请选择出生日期' }}
				</picker>
            </view> -->
           <!-- <view class="form-item">
                <text class="label">地址</text>
                <picker class="flex ali-c" :style="{
                    color: '#888888'
                }">
                    {{ '请选择所在社区' }}
                    <uni-icons type="right" color="#888888" size="16" />
                </picker>
            </view> -->
            <view class="form-item" v-if="list.length>0">
                <text class="label">已购课程</text>
            </view>
            <view class="listbox" v-for="(item,index) in list" v-show="showAllClass ? index < 5 : index < 2" :key="index">
                <view class="listinfo">
                    <view class="leftbox">
                        <image :src="item.img.split(',')[0]"></image>
                    </view>
                    <view class="rightbox">
                        <view class="namebox">
                            <view>{{item.course_name}}</view>
                            <view class="statusbox">{{pay_status[item.pay_status]}}</view>
                        </view>
                        <view class="placebox">
                            <view class="specbox">报名截止时间</view>
                            <view>共{{item.class_hour}}节课</view>
                        </view>
                        <view class="placebox">

                            <view>老师:{{item.teacher_name}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view style="padding-bottom: 30rpx;"  v-if="list.length>0">
                <view class="showallclass" v-if="!showAllClass" @click="showAllClass=!showAllClass">
                    查看全部{{list.length}}节课
                    <image st src="/static/jt.png" mode="heightFix" style="height: 20rpx;margin-left: 10rpx;" />
                </view>
            </view>
        </view>
		<view class="form" v-for="(item,index) in familylist" :key="index">
		   <view class="form-item">
		        <text class="label">家庭成员关系</text>
				<picker @change="e=>frelationChangee(e,item,index)" :range="relationlist" range-key="title" class="flex ali-c" :style="{
				    color: item.relation ? '#000000' : '#888888'
				}">
				    {{ item.relation ? relationlist[item.relation].title : '请选择家庭成员关系' }}
				    <uni-icons type="right" color="#888888" size="16" />
				</picker>
		        <!-- <input v-model="item.nickname" placeholder="请输入家庭成员关系" /> -->
		    </view>
		   
		    <view class="form-item">
		        <text class="label">真实姓名</text>
		        <input v-model="item.name" placeholder="请输入真实姓名" />
		    </view>
			<view class="form-item">
			    <text class="label">手机号</text>
			    <input  v-model="item.mobile" placeholder="请输入手机号" type="number" />
			</view>
			<view class="form-item">
			    <text class="label">性别</text>
			    <picker @change="e=>fsexChange(e,item,index)" :range="sexlist" range-key="title" class="flex ali-c" :style="{
			        color: item.sex ? '#000000' : '#888888'
			    }">
			        {{ item.sex ? sexlist[item.sex].title : '请选择性别' }}
			        <uni-icons type="right" color="#888888" size="16" />
			    </picker>
			</view>
		    <view class="form-item">
		        <text class="label">出生日期</text>
		        <picker @change="e=>fbirthChange(e,item,index)" mode="date" class="flex ali-c" :style="{
		            color: item.brithday ? '#000000' : '#888888'
		        }">
		            {{ item.brithday ? item.brithday : '请选择出生日期' }}
		            <uni-icons type="right" color="#888888" size="16" />
		        </picker>
		    </view>
			<!-- <view class="jiabox" @click="addfamily(item)" v-if="index==familylist.length-1">
				添加家庭成员<image src="../../static/jia.png"></image>
			</view> -->
		</view>
		<view class="jiabox" @click="addfamily()" >
			添加家庭成员<image src="../../static/jia.png"></image>
		</view>
        <view class="confirm-button" @click="sumbit()">
            提交
        </view>
    </view>
</template>
<script>
export default {
    data() {
		
        return {
            src: '',
            showAllClass: false,
			currentDate:'',
            form: {
                sex: '',
                brithday: '',
                name:'',
				relation:'',
				phoneNumber:''
            },
			familylist:[
				{
					sex: '',
					brithday: '',
					name:'',
					mobile:'',
					relation:''
				}
			],
			sexlist:[{id:0,title:'保密'},{id:1,title:'男'},{id:2,title:'女'}],//性别0保密1男2女
			info:{},
			fd:true,//防抖
			list:[],
			c:true,
			relationlist:[{id:1,title:'父母'},{id:2,title:'配偶'},{id:3,title:'子女'},{id:4,title:'其它'},
			{id:5,title:'老人'},{id:6,title:'本人'}],//1父母2配偶3子女4其它5老人6本人 
			pay_status:['未支付','待上课','已完结','待评价','已完成','已退款','已取消'],//支付状态0未支付1已支付/待核销3已核销/待评价4已评价/已完成5已退款6已取消
        }
    },
	computed: {
	        startDate() {
	            return this.getDate('start');
	        },
	        endDate() {
	            return this.getDate('end');
	        }
	    },
    onReady() {
		console.log(this.familylist.length)
		this.getcom()
		this.getinfo()
		this.getlist()
		// this.getfamilylist()
    },
    methods: {
		getcom(){
			this.currentDate = this.getDate({
			            format: true
			        })
		},
		getDate(type) {
		            const date = new Date();
		            let year = date.getFullYear();
		            let month = date.getMonth() + 1;
		            let day = date.getDate();
		
		            if (type === 'start') {
		                year = year - 60;
		            } else if (type === 'end') {
		                year = year + 2;
		            }
		            month = month > 9 ? month : '0' + month;
		            day = day > 9 ? day : '0' + day;
		            return `${year}-${month}-${day}`;
		        },
        openTimeRange() {
            this.$refs.timeRange.open()
        },
        openLabelPick() {
            this.$refs.labelPick.open()
        },
        birthChange({ detail: { value } }) {
            this.form.brithday = value
			console.log(this.form.brithday)
        },
		fbirthChange(e,item,index) {
			this.familylist[index].brithday = e.detail.value
		    // item.brithday = e.detail.value
			console.log(e)
		},
        sexChange({ detail: { value } }) {
            this.form.sex = value
        },
		relationChange({ detail: { value } }) {
            this.form.relation = value
			console.log( this.form.relation,' this.form.relation')
        },
		frelationChangee(e,item,index) {
			this.familylist[index].relation = e.detail.value
           // item.sex = e.detail.value
        },
		fsexChange(e,item,index) {
			this.familylist[index].sex = e.detail.value
           // item.sex = e.detail.value
        },
		addfamily(item){
			// if(!this.form.sex||!this.form.brithday||!this.form.name||!this.form.phoneNumber||!this.form.relation){
			// 	uni.showToast({
			// 		title:'请先填写上面的信息',
			// 		icon:'none'
			// 	})
			// 	return
			// }
			this.familylist.push({
				sex: '',
				brithday: '',
				name:'',
				mobile:'',
				relation:''
			})
			console.log(this.familylist)
		},
		sumbit(){
			const data = JSON.parse(JSON.stringify(this.familylist.filter(item => item.name!=='')))
			// data.forEach(item => {
			// 	if(!item.brithday){
			// 		console.log(item.brithday,'item.brithday')
			// 		this.c = false
			// 	}
			// })
			// console.log(this.c,'c')
			// if(this.c==false){
			// 	uni.showToast({
			// 		title:'请选择出生日期',
			// 		icon:'none'
			// 	})
			// 	return
			// }
			data.map(item=>{
				item.relation=parseInt(item.relation)+1
				return item
			})
			// data.unshift({
			// 	sex:this.form.sex,
			// 	brithday: this.form.brithday,
			// 	name:this.form.name,
			// 	relation:this.form.relation,
			// 	mobile:this.form.phoneNumber,
			// })
			if(this.fd){
				this.fd = false
				this.$http({
					url:'/api/Activity/add_family',
					data:{
						data:data,
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					uni.navigateTo({
						url:'/pagemy/familylist/familylist'
					})
				}).finally(()=>{
					setTimeout(()=>{
						this.fd = true
					},500)
				})
			}
			
		},
        chooseImage(type) {
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                success: (res) => {
                    if (res.tempFilePaths.length) {
                        this.src = res.tempFilePaths[0]
                        switch (type) {

                        }
                    }
                }
            })
        },
		getinfo(){
			this.$http({
				url:'/api/Course/user_info'
			}).then(res=>{
				this.form = {...this.form,...res.data}
				this.form.sname = this.form.name+'的家庭'
				if(!this.form.brithday){
					this.form.brithday = this.currentDate
				}
				console.log(this.form)
			})
		},
		getlist(){
			this.$http({
				url:'/api/course/orderlist',
				data:{
					pay_status:1,//支付状态0未支付1已支付/待核销3已核销/待评价4已评价/已完成5已退款6已取消
					limit:999,
					page:1
				}
			}).then(res=>{
				this.list = res.data
			})
		},
		
    }
}
</script>
<style lang="scss">
.authoration-page {
    padding: 24rpx 0;
    padding-bottom: env(safe-area-inset-bottom);

    .form {
        padding: 0 30rpx;
        background-color: white;
        border-radius: 20rpx;
		margin-top: 20rpx;

        .form-item {
            display: flex;
            font-size: 32rpx;
            font-weight: normal;
            color: #555555;
            padding: 40rpx 0;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1rpx solid rgba(0, 0, 0, .1);

            input {
                text-align: right;
                color: #000000;
            }
        }

        .form-item:last-child {
            border-bottom: none;
        }
		.jiabox{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 40rpx;
			background-color: #F7F7F7;
			image{
				width: 31rpx;
				height: 31rpx;
				margin-left: 12rpx;
			}
		}
    }

    .choose-image {
        margin-top: 20rpx;
        border: 1px dashed rgba(0, 0, 0, .2);
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50rpx 0;

        image {
            width: 100rpx;
        }
    }
	.jiabox{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		image{
			width: 31rpx;
			height: 31rpx;
			margin-left: 12rpx;
		}
	}

    .confirm-button {
        width: 690rpx;
        height: 96rpx;
        background: #FF8A9B;
        border-radius: 83rpx 83rpx 83rpx 83rpx;
        opacity: 1;
        text-align: center;
        color: white;
        margin: 0 auto;
        margin-top: 30rpx;
        line-height: 96rpx;
    }

    .listbox {
        width: 690rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        margin-top: 20rpx;

        .listinfo {
            height: 218rpx;
            border-bottom: 2rpx solid #ECECEC;
            display: flex;
            align-items: center;

            .leftbox {
                width: 190rpx;
                background: #FFFFFF;
                border-radius: 6rpx;

                image {
                    width: 160rpx;
                    height: 160rpx;
                }
            }

            .rightbox {
                width: 500rpx;

                .namebox {
                    font-size: 36rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #222222;
                    -webkit-line-clamp: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .name {
                        width: 400rpx;
                        -webkit-line-clamp: 1;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .statusbox {
                        width: 100rpx;
                        text-align: center;
                        font-size: 28rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FF8A9B;
                    }
                }

                .placebox {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #555555;
                    display: flex;
                    align-items: center;
                    margin-top: 18rpx;

                    image {
                        width: 24rpx;
                        height: 26rpx;
                        margin-right: 14rpx;
                    }

                    .specbox {
                        width: 68rpx;
                        height: 38rpx;
                        background: linear-gradient(180deg, #FCBB8C 0%, #FF8158 100%);
                        border-radius: 4rpx 8rpx 8rpx 8rpx;
                        line-height: 38rpx;
                        text-align: center;
                        font-size: 28rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-right: 18rpx;
                    }
                }
            }
        }

        .infobut {
            width: 690rpx;
            height: 68rpx;
            background: #FF8A9B;
            border-radius: 36rpx;
            font-size: 32rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            line-height: 68rpx;
            margin-top: 20rpx;
        }
    }

    .showallclass {
        width: 254rpx;
        height: 54rpx;
        background: #F7F7F7;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        opacity: 1;
        margin: 30rpx auto;
        margin-bottom: 0;
        font-size: 26rpx;
        color: #555555;
        padding: 10rpx 20rpx;
        text-align: center;
        line-height: 54rpx;

    }
}
</style>